<script lang="ts" setup>
import { ref, reactive, toRefs, watch } from "vue" // vue
import { FormInstance } from "element-plus" // elment
import { Search, Refresh } from "@element-plus/icons-vue" // 按钮图标
import { getPhoneApi, goodsDetails } from "@/api/xinghai" // 接口
import { usePagination } from "@/hooks/usePagination" // 分页器
import { formatDateTime } from "@/utils" // 时间转换

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination() // 分页器

// 表单
const data = reactive<any>({
  formData: {},
  searchData: {
    poolName: undefined, // 号码名称
    province: undefined, // 省
    city: undefined, // 市
    phone: undefined, // 手机号
    rule: undefined, //   规则全称
    operator: undefined // 运营商
  },
  // 表单验证
  rules: {}
})
const { searchData, formData } = toRefs(data)

// #region 查
const tableData = ref<any>([])
function tablelist() {
  getPhoneApi({
    ...searchData.value,
    page: paginationData.currentPage,
    size: paginationData.pageSize
  })
    .then((res: any) => {
      tableData.value = res.data.list
      paginationData.total = res.data.total
    })
    .catch(() => {
      tableData.value = []
    })
}
tablelist()

// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
// 搜索
function handleSearch() {
  tablelist()
}
// 重置
function resetSearch() {
  searchFormRef.value?.resetFields()
  paginationData.currentPage = 1
  handleSearch()
}
// #endregion

// #region 添加和修改框
const dialogVisible = ref(false)
const ids = ref(undefined) // 判断修改还是增加  判断是否查看
// 查看详情
const handleCK = (row: any) => {
  if (row.poolName == "本地") {
    console.log(1)
    ids.value = row.id
    dialogVisible.value = true
    formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
  } else {
    console.log(2)
    goodsDetails({ phone: row.phone, poolName: row.poolName }).then((res: any) => {
      dialogVisible.value = true
      if (res.code == 200) {
        formData.value = res.data
      }
    })
  }
}
// #endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], tablelist, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-row justify="center" align="middle">
        <el-col>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="poolName" label="号池名称">
              <el-input v-model.trim="searchData.poolName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="province" label="省">
              <el-input v-model.trim="searchData.province" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="city" label="市">
              <el-input v-model.trim="searchData.city" clearable placeholder="请输入" />
            </el-form-item>

            <el-form-item prop="phone" label="手机号">
              <el-input v-model.trim="searchData.phone" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="rule" label="规则全称">
              <el-input v-model.trim="searchData.rule" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="operator" label="运营商">
              <el-select v-model="searchData.operator" clearable placeholder="请选择">
                <el-option :key="1" label="移动" value="移动" />
                <el-option :key="2" label="电信" value="电信" />
                <el-option :key="3" label="联通" value="联通" />
                <el-option :key="4" label="广电" value="广电" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px">
      <!-- <el-table :data="tableData" border>
        <el-table-column prop="prestoreMoney" label="预存话费" align="center" width="75" />
        <el-table-column prop="saleprice" label="促销价格" align="center" width="75" />
        <el-table-column prop="price" label="价格" align="center" width="75" />
        <el-table-column prop="floorPrice" label="最低消费" align="center" width="75" />
        <el-table-column prop="maxAge" label="最大年龄" align="center" width="75" />
        <el-table-column prop="minAge" label="最小年龄" align="center" width="75" />
        <el-table-column prop="area" label="不发货地区" align="center" width="75" />
        <el-table-column prop="soleArea" label="只发货地区" align="center" width="75" />
        <el-table-column prop="active" label="是否是促销号码" align="center" width="75" />
      </el-table> -->
      <div class="border-box">
        <el-card
          class="item"
          style="width: 19.6%; margin: 0 5px 5px 0; cursor: pointer"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <p style="vertical-align: center">
            <span style="font-size: 20px">{{ item.phone }}</span>
            &nbsp;
            <span style="font-size: 18px; color: red">{{ item.rule }}</span>
          </p>
          <p v-if="item.activitStartTime !== null">
            促销时间：{{ formatDateTime(item.activitStartTime) }}- {{ formatDateTime(item.activitEndTime) }}
          </p>
          <el-divider border-style="dashed" />
          <div
            style="
              text-align: center;
              border-radius: 5px;
              display: flex;
              height: 25px;
              line-height: 25px;
              justify-content: space-between;
            "
          >
            <div style="width: 33%; background: #fff3f3; border-radius: 5px">
              <el-text style="font-size: 12px; color: #ff5e5e">月低消:{{ item.floorPrice }}元 </el-text>
            </div>
            <div style="width: 33%; background: #fff3f3; border-radius: 5px">
              <el-text class="mx-1" style="font-size: 12px; color: #ff5e5e">合约期: {{ item.monthLimit }}</el-text>
            </div>
            <div style="width: 33%; background: #fff3f3; border-radius: 5px">
              <el-text class="mx-1" style="font-size: 12px; color: #ff5e5e"> 预存款:{{ item.advanceLimit }}元</el-text>
            </div>
          </div>

          <div
            style="
              margin-top: 20px;
              text-align: center;
              border-radius: 5px;
              display: flex;
              height: 25px;
              line-height: 25px;
              justify-content: space-between;
            "
          >
            <div style="width: 33%; background: #dbf6e5; border-radius: 5px">
              <el-text style="font-size: 12px" type="success">{{ item.province }} </el-text>
            </div>
            <div style="width: 33%; background: #d6f4f9; border-radius: 5px">
              <el-text class="mx-1" type="primary"> {{ item.city }}</el-text>
            </div>
            <div style="width: 33%; background: #fff1d6; border-radius: 5px">
              <el-text class="mx-1" type="warning"> {{ item.operator }}</el-text>
            </div>
          </div>
          <div style="margin-top: 15px">
            <span style="font-size: 16px">{{ item.poolName }}</span>
            &nbsp;&nbsp;
            <el-button link :disabled="item.state == 2" type="primary" @click="handleCK(item)">详情</el-button>
          </div>
        </el-card>
      </div>

      <!-- 分页器 -->
      <div class="pagination" style="margin-top: 20px">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="paginationData.total"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- <el-dialog v-model="dialogVisible" @closed="resetForm" width="60%">
      <el-form ref="formRef" :model="formData" label-width="120px" label-position="left" :rules="rules">
        <el-form-item prop="poolName" label="号码名称">
          <el-input v-model="formData.poolName" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="province" label="省">
          <el-input v-model="formData.province" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>

        <el-form-item prop="city" label="市">
          <el-input v-model="formData.city" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>

        <el-form-item prop="phone" label="手机号">
          <el-input v-model="formData.phone" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="phoneType" label="号码附带信息">
          <el-input v-model="formData.phoneType" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="rule" label="规则全称">
          <el-input v-model="formData.rule" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="realRule" label="规则简称">
          <el-input v-model="formData.realRule" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="info" label="套餐详情">
          <el-input v-model="formData.info" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="operator" label="运营商">
          <el-input v-model="formData.operator" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="productId" label="商品id">
          <el-input v-model="formData.productId" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="prestoreMoney" label="预存话费">
          <el-input v-model="formData.prestoreMoney" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="saleprice" label="促销价格">
          <el-input v-model="formData.saleprice" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="price" label="价格">
          <el-input v-model="formData.price" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>

        <el-form-item prop="advanceLimit" label="合约期">
          <el-input v-model="formData.advanceLimit" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="monthLimit" label="月低消">
          <el-input v-model="formData.monthLimit" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="monthPrice" label="月租">
          <el-input v-model="formData.monthPrice" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="floorPrice" label="最低消费">
          <el-input v-model="formData.floorPrice" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="maxAge" label="最大年龄">
          <el-input v-model="formData.maxAge" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="minAge" label="最小年龄">
          <el-input v-model="formData.minAge" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="area" label="不发货地区">
          <el-input v-model="formData.area" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="soleArea" label="只发货地区">
          <el-input v-model="formData.soleArea" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="active" label="是否是促销号码">
          <el-input v-model="formData.active" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
      </template>
    </el-dialog> -->
    <el-drawer v-model="dialogVisible" :with-header="false">
      <div style="text-align: left">
        <div>
          <span class="text">{{ formData.phone }}</span>
          &nbsp;
          <span style="font-size: 18px; color: red">{{ formData.rule }}</span>
        </div>
      </div>

      <div>
        <el-divider border-style="dashed" />
        <div style="text-align: left">套餐名字：{{ formData.name }}</div>
        <div style="text-align: left">套餐详情：{{ formData.info }}</div>
      </div>
      <div>
        <el-divider border-style="dashed" />
        <div style="text-align: left">号码附带信息：{{ formData.phoneType }}</div>
      </div>
      <div>
        <el-divider border-style="dashed" />
        <div style="text-align: left">不发货地区： {{ formData.area.replace(/\[|]|'/g, "") }}</div>
        <div style="text-align: left">只发货地区： {{ formData.soleArea.replace(/\[|]|'/g, "") }}</div>
      </div>
      <div>
        <el-divider border-style="dashed" />
        <div
          style="
            text-align: center;
            border-radius: 5px;
            display: flex;
            height: 25px;
            line-height: 25px;
            justify-content: space-between;
          "
        >
          <div style="width: 24%; background: #dbf6e5; border-radius: 5px">
            <el-text style="font-size: 12px" type="success">预存款：{{ formData.advanceLimit }} </el-text>
          </div>
          <div style="width: 24%; background: #fcd3d3; border-radius: 5px">
            <el-text style="font-size: 12px" type="danger">促销价格：{{ formData.saleprice }} </el-text>
          </div>
          <div style="width: 24%; background: #fff1d6; border-radius: 5px">
            <el-text class="mx-1" type="warning"> 价格：{{ formData.price }}</el-text>
          </div>
        </div>
      </div>
      <div>
        <el-divider border-style="dashed" />
        <div
          style="
            text-align: center;
            border-radius: 5px;
            display: flex;
            height: 25px;
            line-height: 25px;
            justify-content: space-between;
          "
        >
          <div style="width: 24%; background: #dbf6e5; border-radius: 5px">
            <el-text style="font-size: 12px" type="success">最大年龄：{{ formData.maxAge }} </el-text>
          </div>
          <div style="width: 24%; background: #fcd3d3; border-radius: 5px">
            <el-text style="font-size: 12px" type="danger">最小年龄：{{ formData.minAge }} </el-text>
          </div>
          <div style="width: 24%; background: #fff1d6; border-radius: 5px">
            <el-text class="mx-1" type="warning">月低消：{{ formData.floorPrice }}</el-text>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
// 超过两行显示省略号
.table-ellipsis {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.border-box {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-start;
}
.text {
  font-size: 22px;
  background: linear-gradient(to right, #ff0000, #0000ff, #00ff00);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
